10 异步编程

function loadScript(src, callback) {
    console.log('finished'+src);
    setTimeout(callback, 500);
}

loadScript('1',() => {console.log('callback');});

function loadScript(src, callback) {
    console.log('finished'+src);
    setTimeout(callback, 500);
}
//回调地狱
loadScript(
    '1',
    () => {
        console.log('callback');
        loadScript(
            '2',
            () => {
                console.log('callback');
                loadScript(
                    '3',
                    () => {
                        console.log('callback');
                        loadScript(
                            '4',
                            () => {
                                console.log('callback');
                            }
                        );
                    }
                );
            }
        );
    }
);
/**
 * finished1
callback
finished2
callback
finished3
callback
finished4
callback
 */

function timeout(ms) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, ms, 'done');
  });
}

timeout(100).then((value) => {
  console.log(value);
});

//用于随机生成一个图片
function Image() {
    let result = Math.random();
    if (result > 0.5) {
        this.value = true;
    } else {
        this.value = false;
    };
}

let promise = new Promise(function (resolve, reject) {

    let image = new Image();
    console.log(image.value);

    if (image.value) {
        resolve('loaded');
    } else {
        reject(new Error("shit!!!"));
    }
});

new Promise((resolve, reject) => {
  resolve(1);
  console.log(2);
}).then(r => {
  console.log(r);
});
// 2
// 1

promise.then(
  function(result) { /* handle a successful result */ },
  function(error) { /* handle an error */ }
);

promise.then(
    result => { console.log(result) },//loaded
    error => { console.log(error) }//Error: shit!!!
)

new Promise((resolve, reject) => {
  return resolve(1);
  // 后面的语句不会执行
  console.log(2);
})

getJSON('/posts.json').then(function(posts) {
  // ...
}).catch(function(error) {
  // 处理 getJSON 和 前一个回调函数运行时发生的错误
  console.log('发生错误！', error);
});

p.then((val) => console.log('fulfilled:', val))
  .catch((err) => console.log('rejected', err));

// 等同于
p.then((val) => console.log('fulfilled:', val))
  .then(null, (err) => console.log("rejected:", err));
// 写法二
const promise = new Promise(function(resolve, reject) {
  reject(new Error('test'));
});
promise.catch(function(error) {
  console.log(error);
});

const promise = new Promise(function(resolve, reject) {
  resolve('ok');
  throw new Error('test');
});
promise
  .then(function(value) { console.log(value) })
  .catch(function(error) { console.log(error) });
// ok

getJSON('/post/1.json').then(function(post) {
  return getJSON(post.commentURL);
}).then(function(comments) {
  // some code
}).catch(function(error) {
  // 处理前面三个Promise产生的错误
});

const someAsyncThing = function () {
    return new Promise(function (resolve, reject) {
        // 下面一行会报错，因为x没有声明
        resolve(x + 2);
    });
};

someAsyncThing()
    .then(function () {
        console.log('everything is great');
    })
    .catch((err) => {
        console.error(err);
    })

const someAsyncThing = function() {
  return new Promise(function(resolve, reject) {
    // 下面一行会报错，因为x没有声明
    resolve(x + 2);
  });
};

someAsyncThing()
.catch(function(error) {
  console.log('oh no', error);
})
.then(function() {
  console.log('carry on');
});
// oh no [ReferenceError: x is not defined]
// carry on

promise
.then(result => {···})
.catch(error => {···})
.finally(() => {···});

let promise = new Promise(function (res,rej) {
    res(1);
})

promise.then((res) => {

    console.log(res);//1
    return res * 2;

}).then((res) => {

    console.log(res);//2
    return res * 2;

}).finally(() => {

    console.log('finished!!!');//finished!!!

})

let promise = fetch(url);

fetch('/article/promise-chaining/user.json')
  // 当远程服务器响应时，下面的 .then 开始执行
  .then(function(response) {
    // 当 user.json 加载完成时，response.text() 会返回一个新的 promise
    // 该 promise 以加载的 user.json 为 result 进行 resolve
    return response.text();
  })
  .then(function(text) {
    // ……这是远程文件的内容
    alert(text); // {"name": "iliakan", "isAdmin": true}
  });

// 同上，但使用 response.json() 将远程内容解析为 JSON
fetch('/article/promise-chaining/user.json')
  .then(response => response.json())
  .then(user => alert(user.name)); // iliakan，获取到了用户名

promise.then(f1, f2);

promise.then(f1).catch(f2);

new Promise(function(resolve, reject) {
  setTimeout(() => {
    throw new Error("Whoops!");
  }, 1000);
}).catch(alert);

let promise = Promise.all(iterable);

let names = ['iliakan', 'remy', 'jeresig'];

let requests = names.map(name => fetch(`https://api.github.com/users/${name}`));

Promise.all(requests)
  .then(responses => {
    // 所有响应都被成功 resolved
    for(let response of responses) {
      alert(`${response.url}: ${response.status}`); // 对应每个 url 都显示 200
    }

    return responses;
  })
  // 将响应数组映射（map）到 response.json() 数组中以读取它们的内容
  .then(responses => Promise.all(responses.map(r => r.json())))
  // 所有 JSON 结果都被解析："users" 是它们的数组
  .then(users => users.forEach(user => alert(user.name)));

let urls = [
  'https://api.github.com/users/iliakan',
  'https://api.github.com/users/remy',
  'https://no-such-url'
];

Promise.allSettled(urls.map(url => fetch(url)))
  .then(results => { // (*)
    results.forEach((result, num) => {
      if (result.status == "fulfilled") {
        alert(`${urls[num]}: ${result.value.status}`);
      }
      if (result.status == "rejected") {
        alert(`${urls[num]}: ${result.reason}`);
      }
    });
  });

[
  {status: 'fulfilled', value: ...response...},
  {status: 'fulfilled', value: ...response...},
  {status: 'rejected', reason: ...error object...}
]

//改造前
function loadScript(src, callback) {
  let script = document.createElement('script');
  script.src = src;

  script.onload = () => callback(null, script);
  script.onerror = () => callback(new Error(`Script load error for ${src}`));

  document.head.append(script);
}

// 用法：
// loadScript('path/script.js', (err, script) => {...})


//改造后
let loadScriptPromise = function(src) {
  return new Promise((resolve, reject) => {
    loadScript(src, (err, script) => {
      if (err) reject(err);
      else resolve(script);
    });
  });
};

// 用法：
// loadScriptPromise('path/script.js').then(...)

function promisify(f) {

  return function (...args) { // 返回一个包装函数（wrapper-function） (*)

    return new Promise((resolve, reject) => {
      function callback(err, result) { // 我们对 f 的自定义的回调 (**)
        if (err) {
          reject(err);
        } else {
          resolve(result);
        }

      }

      args.push(callback); // 将我们的自定义的回调附加到 f 参数（arguments）的末尾
      f.call(this, ...args); // 调用原始的函数
    });

  };

}

// 用法：
let loadScriptPromise = promisify(loadScript);
loadScriptPromise(...).then(...);

let promise = Promise.resolve();

promise.then(() => alert("promise done!"));

alert("code finished"); // 这个 alert 先显示

class Waiter {
  async wait() {
    return await Promise.resolve(1);
  }
}

new Waiter()
  .wait()
  .then(alert); // 1（alert 等同于 result => alert(result)）

async function f() {

  try {
    let response = await fetch('http://no-such-url');
  } catch(err) {
    alert(err); // TypeError: failed to fetch
  }
}

f();

async function f() {
  let response = await fetch('http://no-such-url');
}

// f() 变成了一个 rejected 的 promise
f().catch(alert); // TypeError: failed to fetch // (*)

function callback() {
    console.log('Done');
}
console.log('before setTimeout()');
setTimeout(callback, 1000); // 1秒钟后调用callback函数
console.log('after setTimeout()');

request.onreadystatechange = function () {
    if (request.readyState === 4) {
        if (request.status === 200) {
            return success(request.responseText);
        } else {
            return fail(request.status);
        }
    }
}

let ajax = ajaxGet('http://...');
ajax.ifSuccess(success)
    .ifFail(fail);

function test(resolve, reject) {
    let timeOut = Math.random() * 2;
    log('set timeout to: ' + timeOut + ' seconds.');
    setTimeout(function () {
        if (timeOut < 1) {
            log('call resolve()...');
            resolve('200 OK');
        }
        else {
            log('call reject()...');
            reject('timeout in ' + timeOut + ' seconds.');
        }
    }, timeOut * 1000);
}

let p1 = new Promise(test);
let p2 = p1.then(function (result) {
    console.log('成功：' + result);
});
let p3 = p2.catch(function (reason) {
    console.log('失败：' + reason);
});

// 如果成功，执行这个函数：
p1.then(function (result) {
    console.log('成功：' + result);
});

p2.catch(function (reason) {
    console.log('失败：' + reason);
});

new Promise(test).then(function (result) {
    console.log('成功：' + result);
}).catch(function (reason) {
    console.log('失败：' + reason);
});

job1.then(job2).then(job3).catch(handleError);

let p1 = new Promise(function (resolve, reject) {
    setTimeout(resolve, 500, 'P1');
});
let p2 = new Promise(function (resolve, reject) {
    setTimeout(resolve, 600, 'P2');
});
// 同时执行p1和p2，并在它们都完成后执行then:
Promise.all([p1, p2]).then(function (results) {
    console.log(results); // 获得一个Array: ['P1', 'P2']
});

let p1 = new Promise(function (resolve, reject) {
    setTimeout(resolve, 500, 'P1');
});
let p2 = new Promise(function (resolve, reject) {
    setTimeout(resolve, 600, 'P2');
});
Promise.race([p1, p2]).then(function (result) {
    console.log(result); // 'P1'
});

class SimplePromise {
  constructor(executor) {
    this.state = 'pending'; // 状态：pending, fulfilled, rejected
    this.value = undefined; // 成功时的值
    this.reason = undefined; // 失败时的原因
    this.onFulfilledCallbacks = []; // 成功回调队列
    this.onRejectedCallbacks = []; // 失败回调队列

    const resolve = (value) => {
      if (this.state === 'pending') {
        this.state = 'fulfilled';
        this.value = value;
        this.onFulfilledCallbacks.forEach(fn => fn());
      }
    };

    const reject = (reason) => {
      if (this.state === 'pending') {
        this.state = 'rejected';
        this.reason = reason;
        this.onRejectedCallbacks.forEach(fn => fn());
      }
    };

    try {
      executor(resolve, reject);
    } catch (error) {
      reject(error);
    }
  }

  then(onFulfilled, onRejected) {
    // 简化版 then 方法，处理状态和回调
    if (this.state === 'fulfilled') {
      onFulfilled(this.value);
    }
    if (this.state === 'rejected') {
      onRejected(this.reason);
    }
    if (this.state === 'pending') {
      this.onFulfilledCallbacks.push(() => onFulfilled(this.value));
      this.onRejectedCallbacks.push(() => onRejected(this.reason));
    }
  }
}

class ChainablePromise {
    constructor(executor) {
        this.state = 'pending'
        this.value = undefined
        this.reason = undefined
        this.onFulfilledCallbacks = []
        this.onRejectedCallbacks = []

        const resolve = (value) => {
            if (this.state === 'pending') {
                this.state = 'fulfilled'
                this.value = value
                this.onFulfilledCallbacks.forEach((fn) => fn())
            }
        }

        const reject = (reason) => {
            if (this.state === 'pending') {
                this.state = 'rejected'
                this.reason = reason
                this.onRejectedCallbacks.forEach((fn) => fn())
            }
        }

        try {
            executor(resolve, reject)
        } catch (error) {
            reject(error)
        }
    }

    // 核心改造：then 方法
    then(onFulfilled, onRejected) {
        // 处理未传入回调的情况 - 需要将函数设为默认或透传
        onFulfilled =
            typeof onFulfilled === 'function' ? onFulfilled : (value) => value
        onRejected =
            typeof onRejected === 'function'
                ? onRejected
                : (reason) => {
                      throw reason
                  }

        // 1. 关键！每次调用 .then() 都必须返回一个新的 Promise
        return new ChainablePromise((resolve, reject) => {
            // 2. 定义一个函数来处理 onFulfilled 回调的执行和结果
            const handleFulfillment = () => {
                try {
                    // 执行用户传入的成功回调
                    const result = onFulfilled(this.value)
                    // 检查回调的返回值
                    if (result instanceof ChainablePromise) {
                        // 如果返回的是一个 Promise，就等待它完成
                        result.then(resolve, reject)
                    } else {
                        // 如果返回的是普通值，就用这个值 resolve 新的 Promise
                        resolve(result)
                    }
                } catch (error) {
                    // 如果回调函数内部抛出异常，则 reject 新的 Promise
                    reject(error)
                }
            }

            // 3. 定义一个函数来处理 onRejected 回调
            const handleRejection = () => {
                try {
                    const result = onRejected(this.reason)
                    if (result instanceof ChainablePromise) {
                        result.then(resolve, reject)
                    } else {
                        resolve(result)
                    }
                } catch (error) {
                    reject(error)
                }
            }

            // 4. 根据当前 Promise 的状态，决定何时执行回调
            if (this.state === 'fulfilled') {
                handleFulfillment()
            }
            if (this.state === 'rejected') {
                handleRejection()
            }
            if (this.state === 'pending') {
                // 如果还是 pending 状态，就将回调函数存入队列，等待未来执行
                this.onFulfilledCallbacks.push(handleFulfillment)
                this.onRejectedCallbacks.push(handleRejection)
            }
        })
    }

    catch(onRejected) {
        return this.then(null, onRejected)
    }

    finally(onFinally) {
        return this.then(
            (value) => {
                onFinally()
                return value
            },
            (reason) => {
                onFinally()
                throw reason
            },
        )
    }
}

const myPromise = new ChainablePromise((resolve, reject) => {
    setTimeout(() => {
        resolve('success')
    }, 2000)

    setTimeout(() => {
        reject('error')
    }, 3000)
})
    .then((res) => {
        console.log('success:', res)
    })
    .catch((err) => {
        console.log('error:', err)
    }).finally(() => {
        console.log('finally')
    })

const myPromise = new Promise((resolve, reject) => {
  // 👆 executor 函数是同步执行的

  console.log('1. executor 开始执行 (同步)');

  // 2. 调用浏览器提供的异步 API
  setTimeout(() => {
    console.log('3. setTimeout 的回调执行 (异步)');
    resolve('任务完成');
  }, 1000);

  console.log('2. executor 执行完毕 (同步)');
});

console.log('4. Promise 创建完毕，但异步任务还在后台进行');

myPromise.then(result => {
  console.log('5. Promise 状态变为 fulfilled，then 回调执行', result);
});

Promise.myAll = function(iterable) {
  return new Promise((resolve, reject) => {
    const promises = Array.from(iterable);
    const results = new Array(promises.length);
    let completedCount = 0;

    if (promises.length === 0) {
      resolve([]);
      return;
    }

    promises.forEach((promise, index) => {
      Promise.resolve(promise).then(value => {
        results[index] = value;
        completedCount++;
        if (completedCount === promises.length) resolve(results);
      }, reject);
    });
  });
};

Promise.myRace = function(promises) {
  return new Promise((resolve, reject) => {
    // 1. 遍历所有 Promise
    promises.forEach(promise => {
      // 2. 使用 Promise.resolve 包装，确保处理非 Promise 值
      Promise.resolve(promise)
        .then(resolve) // 3. 任何一个 Promise 成功，立即 resolve
        .catch(reject); // 4. 任何一个 Promise 失败，立即 reject
    });
  });
};

Promise.myAny = function(iterable) {
  return new Promise((resolve, reject) => {
    const promises = Array.from(iterable);
    const errors = new Array(promises.length);
    let rejectedCount = 0;

    if (promises.length === 0) {
      reject(new AggregateError([], 'All promises were rejected'));
      return;
    }

    promises.forEach((promise, index) => {
      Promise.resolve(promise).then(resolve, error => {
        errors[index] = error;
        rejectedCount++;
        if (rejectedCount === promises.length) {
          reject(new AggregateError(errors, 'All promises were rejected'));
        }
      });
    });
  });
};

/**
 * 实现一个 Promise.map 方法
 * @param {Array} list - 需要处理的数组
 * @param {Function} iteratee - 映射函数，接收 (item, index) 并应返回一个 Promise
 * @returns {Promise} - 一个 Promise，resolve 时返回所有结果的数组
 */
Promise.myMap = function(list, iteratee) {
  // 1. 使用原生 Array.map 遍历列表，对每个元素应用 iteratee 函数
  // 这会生成一个由 Promise 组成的新数组
  const promisesArray = list.map((item, index) => {
    return iteratee(item, index);
  });

  // 2. 使用 Promise.all 等待这个 Promise 数组中的所有 Promise 完成
  // Promise.all 返回的 Promise 会在所有子 Promise 成功后 resolve，结果为值数组
  return Promise.all(promisesArray);
};

// 模拟一个异步函数，比如从服务器获取用户信息
function fetchUser(id) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (id > 0) {
        resolve({ id: id, name: `用户${id}` });
      } else {
        reject(new Error(`无效的用户ID: ${id}`));
      }
    }, 1000);
  });
}

const userIds = [1, 2, 3];

// 使用我们实现的 Promise.myMap
Promise.myMap(userIds, (id) => {
  // 这里的函数会返回一个 Promise
  console.log(`正在获取 ID 为 ${id} 的用户...`);
  return fetchUser(id);
})
.then(users => {
  console.log('所有用户获取成功:', users);
  // 输出: 所有用户获取成功: [ { id: 1, name: '用户1' }, { id: 2, name: '用户2' }, { id: 3, name: '用户3' } ]
})
.catch(error => {
  console.error('获取用户失败:', error);
  // 如果任何一个 fetchUser 失败，这里会捕获到错误
});

/**
 * 实现一个带并发限制的 Promise.map
 * @param {Array} list - 需要处理的数组
 * @param {Function} iteratee - 映射函数
 * @param {Object} options - 选项，例如 { concurrency: 2 } 表示最多同时执行2个
 * @returns {Promise}
 */
Promise.myMapWithConcurrency = function(iterable, iteratee, options = {}) {
  const list = Array.from(iterable);
  const concurrency = options.concurrency ?? Infinity;

  if (!(concurrency === Infinity || (Number.isInteger(concurrency) && concurrency > 0))) {
    return Promise.reject(new RangeError('concurrency must be a positive integer or Infinity'));
  }

  const results = new Array(list.length);
  let nextIndexToProcess = 0;
  let completedCount = 0;
  let activeCount = 0;
  let settled = false;

  return new Promise((resolve, reject) => {
    if (list.length === 0) {
      resolve([]);
      return;
    }

    function startNext() {
      while (!settled && nextIndexToProcess < list.length && activeCount < concurrency) {
        const index = nextIndexToProcess++;
        activeCount++;
        Promise.resolve()
          .then(() => iteratee(list[index], index))
          .then(value => {
            results[index] = value;
            completedCount++;
            activeCount--;
            if (completedCount === list.length) {
              settled = true;
              resolve(results);
            } else {
              startNext();
            }
          }, error => {
            settled = true;
            reject(error);
          });
      }
    }

    startNext();
  });
};

async function get(url) {
    let resp = await fetch(url);
    let result = await resp.json();
    return result;
}

let resp = await fetch(url);

let promise = fetch(url);
promise.then((resp) => {
    // 拿到resp
});

let promise = fetch(url);
promise.then((resp) => {
    // 拿到resp
}).catch(e => {
    // 出错了
});

async function get(url) {
    try {
        let resp = await fetch(url);
        let result = await resp.json();
        return result;
    } catch (e) {
        // 出错了
    }
}